<template id="buy">
  <div class="box">
    <mt-header fixed title="购物车"></mt-header>
    <p>
      <span>
        总价{{price}}
      </span>
    </p>
    <p v-for="(item,index) in storenum" :key="index" class="shopcar">
      <img :src="list[item].pic">
      <span>{{list[item].con}}</span>
      <span>{{list[item].price}}</span><br>
    </p>
    <div>
      <mt-popup v-model="popupVisible" >
        已下单
      </mt-popup>
      <mt-button type="danger" size="large" @click="pay">结算</mt-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'

import { Popup } from 'mint-ui';

Vue.component(Popup.name, Popup);

export default {
  created(){
    this.bb()
  },
  data(){
    return{
      popupVisible:false,
      list:[],
      price:0,
      storenum:this.$store.state.num,
    }
  },
  beforeUpdate(){
    this.cc()
  },
  methods: {
    bb() {
      var that=this
      this.$http.get("./src/assets/json/shop.json")
      .then(function(response) {
        that.list=response.data.hot;
        console.log(that.list);
      })
    },
    cc(){
      this.price=0
      console.log(this.$store.state.num);
      for(let i in this.$store.state.num){
        this.price+=parseFloat(this.list[this.$store.state.num[i]].price);
        this.price.toFixed(1)
      }
    },
    pay(){
      if(this.storenum!=''){
        this.popupVisible=!this.popupVisible
        return;
      }
      alert("请添加商品")
    }
  }
};
</script>




<style scoped>
.mint-popup{
  background: none;
  color: #fff;
  font-size: 20px;
}
p{
  justify-content: flex-start;
  text-align: left;
}
.shopcar span{
  display: inline-block;
  position: relative;
  top:-29px;
}
.box .mint-button {
  position:fixed;
  top: 90vh;
  left: 73%;
  width: 100px;

}
</style>
